<template>
    <!--components/popup/index.wxml-->
    <!--客户报备弹框-->
    <u-popup v-model="isShow" mode="center" :borderRadius="20" :closeable="true"
    	:close-icon-color="'#333333'" :close-icon-size="45">
    	<view class="commitContainer">
    		<view class="title">
    			客户报备
    		</view>
    		<view class="phone">
    			<view class="left">
    				手机号
    			</view>
    			<view style="margin-left: 30rpx;display: flex;align-items: center;font-size: 30rpx;letter-spacing: 5rpx;" >
					{{phoneStart3}}
					<phoneInput4 :isPassword="false" v-model="addCustomerPhone" :size="4"
						@confirm="verifyCodeConfirm"></phoneInput4>	
					
<!-- 					<view class="messageInputWrapper" style="overflow: hidden;">
						<u-message-input width="40" :fontSize="fontSizeInput" :value="addCustomerPhone"  @change="" @finish="verifyCodeConfirm"></u-message-input>
					</view> -->
					
					{{phoneEnd4}}
				</view>
    			<view class="pasteBtn" style="margin-left: 15rpx;" @click="onPasterPhoneNum">
    				粘贴
    			</view>
    		</view>
			<view class="btnWrapper">
				<view class="btn1" @click="onClear">
					重置
				</view>
				<view class="btn2" @click="onAddCustomer">
					提交
				</view>
			</view>
		</view>
    </u-popup>
</template>

<script>
    const api = require("@/static/js/api.js")
    import phoneInput4 from "../phoneInput4/index.vue";
	
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let timeId = null
	let that = null
    export default {
        data() {
            return {
                isShow: false,
				fontSizeInput: 30,
				addCustomerPhone: '',
		
            };
        },
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                isReferrer: state => state.userInfo.isReferrer,
				isChannel: state => state.userInfo.isChannel,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        components: {
            phoneInput4
        },
        props: {
            value: {
                type: Boolean
            },
			phoneStart3:{
				type: String,
				default:"***"
			},
			phoneEnd4:{
				type: String,
				default:"****"
			},
			customId:{
				type: String,
				default:""
			},
        },
        watch: {
            value: {
                handler: function observer(val) {
                    var that = this;
					console.log("test1111111")
                    that.isShow = val;
                },
                immediate: true
            },
            isShow:{
                handler: function observer(val) {
                    var _this = this;
					if (_this.isShow){
						this.addCustomerPhone = ""
					}		
                    this.$emit('input', val)
                },
                immediate: true
            },

        },
		created() {
			that = this
		},
        methods: {
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId']),
            ...mapActions(['interceptorLoginInfoAuth','interceptorLoginPhoneAuth', 'updateUserInfo']),
            close(e) {
                let that = this
                that.isShow = false
                this.$emit('cancel');
            },
			onAddCustomer() {
				let that = this
				var postParams = {};

				uni.showLoading();
				console.log(this.addCustomerPhone)
	
				if (/^\d+$/.test(this.addCustomerPhone)&&
					(this.addCustomerPhone.length==4)
				){		
					var phone = this.phoneStart3 + this.addCustomerPhone + this.phoneEnd4
					api.getCustomerUpdatePhone({
						param: {
							phone: phone,
							id: that.customId
						}
					}).then(res => {
						console.log(res)
						if (res.success) {  
							that.$emit("success")
							uni.showModal({
								title: '提示',
								content: '提交成功~~~',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										that.isShow= false
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}else{
							uni.showToast({
								icon: 'none',
								title: res.message,
								duration: 3000,
							})
						}
					})
								
				}
				uni.hideLoading();
			},
			
			onClear() {
				this.addCustomerPhone = ""
			},
			
			verifyCodeConfirm(e) {
				console.log('data',e);
				console.log('verifyCode');
				// this.addCustomerPhone = e
			},
			
			onPasterPhoneNum() {
				let that = this
				uni.getClipboardData({
					success(res) {
						//==去空格
						console.log(res.data)
						var str1 = res.data.replace(/\s*/g,"");
						var result = /^\d+$/.test(str1)
						
						if (result&&(str1.length==11)&&
							(str1.slice(0, 3)==that.phoneStart3)&&
							(str1.slice(7, 11)==that.phoneEnd4)
						){
							uni.showToast({
								title:"粘贴成功！",
								icon:"none",
								duration: 500
							})
							
							that.addCustomerPhone = str1.slice(3, 7)
							console.log("end",that.addCustomerPhone )
						}else{
							uni.showToast({
								title:"请复制正确的11位手机号！",
								icon: "none"
							})					
						}						
					}
				})
			
			},
			
        }
    };
</script>


<style lang="scss" scoped>
    .commitContainer {
    	width: 650rpx;
    	background: #FFFFFF;
    	display: flex;
    	align-items: center;
    	flex-direction: column;
    
    	.item {
    		width: 100%;
    		display: flex;
    		align-items: center;
    		padding: 20rpx 0;
    		border-bottom: 1px solid #F3F3F3;
    
    		.left {
    			margin-left: 30rpx;
    			height: 40rpx;
    			width: 130rpx;
    			font-size: 28rpx;
    			color: #3D3D3D;
    			line-height: 40rpx;
    			margin-right: 40rpx;
    		}
    
    		.middle {
    			min-height: 40rpx;
    			width: 387rpx;
    			line-height: 40rpx;
    			font-size: 28rpx;
    			color: #333333;
    			// word-wrap:break-word;
    		}
    
    		.right {
    			width: 24rpx;
    			height: 24rpx;
    		}
    	}
    
    	.title {
    		// width: 120rpx;
    		height: 42rpx;
    		font-size: 30rpx;
    		color: #1F1F1F;
    		line-height: 42rpx;
    		margin-top: 48rpx;
    		margin-bottom: 18rpx;
    	}
    
    	.phone {
    		display: flex;
    		align-items: center;
    		margin-top: 30rpx;
    
    		.left {
    			font-size: 30rpx;
    			color: #999999;
    			line-height: 42rpx;
    		}
    
    		.right {
    			margin-left: 60rpx;
    			padding: 0 15rpx;
    			width: 290rpx;
    			height: 72rpx;
    			line-height: 72rpx;
    			border-radius: 10rpx;
    			box-sizing: content-box;
    			color: #333333;
    		}
    
    		.rightBorder {
    			border: 1rpx solid #BBBABA;
    		}
    
    		.rightClick {
    			color: #666666;
    			background-color: #eeeeee;
    			text-align: center;
    		}
    
    		.pasteBtn {
    			background-color: #1890FF;
    			color: #ffffff;
    			font-size: 25rpx;
    			line-height: 60rpx;
    			padding: 0 20rpx;
    			height: 60rpx;
    			text-align: center;
    			margin-left: 15px;
    			border-radius: 10rpx;
				position: relative;
				z-index: 100;
    		}
    	}
    
    	.name {
    		display: flex;
    		align-items: center;
    		margin-top: 30rpx;
    
    		.left {
    			font-size: 30rpx;
    			color: #999999;
    			line-height: 42rpx;
    		}
    
    		.right {
    			margin-left: 60rpx;
    			padding: 0 15rpx;
    			width: 400rpx;
    			height: 72rpx;
    			box-sizing: content-box;
    			line-height: 72rpx;
    			border-radius: 10rpx;
    			border: 1rpx solid #BBBABA;
    			color: #333333;
    		}
    	}
    
    	.btnWrapper {
    		display: flex;
    		justify-content: center;
    		margin-top: 100rpx;
    		margin-bottom: 50rpx;
    
    		.btn1 {
    			width: 240rpx;
    			height: 72rpx;
    			border-radius: 37rpx;
    			border: 1px solid #BBBABA;
    			font-size: 28rpx;
    			color: #333333;
    			margin-right: 90rpx;
    			line-height: 72rpx;
    			text-align: center;
    		}
    
    		.btn2 {
    			width: 240rpx;
    			height: 72rpx;
    			background: #5E9FFD;
    			border-radius: 37rpx;
    			font-size: 28rpx;
    			color: #FFFFFF;
    			line-height: 72rpx;
    			text-align: center;
    		}
    	}
    }
	.messageInputWrapper{
		overflow: hidden;
	}
	
</style>
